<template>
    <div id="left-home" :style="{backgroundImage: bgImg, color: '#38E5DE'}">
        <div class="title base" style="color:#38E5DE;font-size: 18px;font-weight: bold;line-height: 24px;">
            港口经济总览
            <img src="../../assets/img/common/close-16px.png" class="close-btn base-pointer" @click="closeLeftWindow" height="16"
                 width="16"/>
        </div>
        <el-tabs @tab-click="handleClick">
            <el-tab-pane label="集装箱">
                <div class="cum-thr-title base-title base" style="font-size: 18px;">南山港年累计吞吐量（至{{ nsSection.month?nsSection.month:'01' }}月）</div>
                <div class="ns-cum-thr-container">
                    <div class="cum-thr">
                        <img src="../../assets/img/common/conta.png" height="100" width="100"/>
                        <number-grow class="base-pointer" :fixed="2" :cusStyle="cusStyle" :subCusStyle="subCusStyle"
                                     :time="1" :value="formatNumber(nsSection.cumContaThr)"
                                     @click="cumNsContaThrClick" :unit="'万TEU'"></number-grow>
                    </div>
                    <div class="indicator-div">
                        <div class="base-pointer" @click="cumNsContaThrClick">
                            同比增长<span style="color: #ff6666">{{ formatNumber(nsSection.cumContaGrowth, 1) }}%</span>
                        </div>
                        <div class="base-pointer" @click="cumNsContaThrClick">
                            对深圳港占比<span style="color: #ff6666">{{ formatNumber(nsSection.cumContaRatio, 1) }}%</span>
                        </div>
                    </div>
                </div>
                <!--                <div class="port-ranking-title base-title base" style="font-size: 18px;">各港累计吞吐量占比</div>-->
                <!--                <pie-chart-simple ref="portContaRatio" class="port-ratio" />-->
                <div class="port-ranking-title base-title base" style="font-size: 18px;">深圳港年累计吞吐量（至{{ nsSection.month?nsSection.month:'01' }}月/万TEU）</div>
                <div class="sz-cum-thr-container">
                    <div class="indicator-div">
                        <div class="base-pointer" @click="cumSzContaThrClick('合计')">
                            合计<span class="sz-pointer">{{ formatNumber(szSection.cumContaThr) }}</span>
                        </div>
                        <div class="base-pointer" @click="cumSzContaThrClick('外贸出口')">
                            外贸出口<span class="sz-pointer">{{ formatNumber(szSection.cumFreContaOutThr) }}</span>
                        </div>
                    </div>
                    <div class="indicator-div">
                        <div class="base-pointer" @click="cumSzContaThrClick('重箱')">
                            重箱<span class="sz-pointer">{{ formatNumber(szSection.cumContaLoadedThr) }}</span>
                        </div>
                        <div class="base-pointer" @click="cumSzContaThrClick('空箱')">
                            空箱<span class="sz-pointer">{{ formatNumber(szSection.cumContaEmptyThr) }}</span>
                        </div>
                    </div>
                    <div class="indicator-div">
                        <div class="base-pointer" @click="cumSzContaThrClick('进口')">
                            进口<span class="sz-pointer">{{ formatNumber(szSection.cumContaInThr) }}</span>
                        </div>
                        <div class="base-pointer" @click="cumSzContaThrClick('出口')">
                            出口<span class="sz-pointer">{{ formatNumber(szSection.cumContaOutThr) }}</span>
                        </div>
                    </div>
                </div>
                <div class="port-ranking-title base-title base" style="font-size: 18px;">港口排名</div>
                <el-tabs @tab-click="handleRankingClick">
                    <el-tab-pane label="国内排名">
                        <world-ranking-conta class="world-conta" ref="cityConta"/>
                    </el-tab-pane>
                    <el-tab-pane label="世界排名">
                        <world-ranking-conta class="world-conta" ref="worldConta"/>
                    </el-tab-pane>
                    <el-tab-pane label="大湾区排名">
                        <world-ranking-conta class="world-conta" ref="areaConta"/>
                    </el-tab-pane>
                </el-tabs>
            </el-tab-pane>
            <el-tab-pane label="货物">
                <div class="cum-thr-title base-title base" style="font-size: 18px;">南山港年累计吞吐量（至{{ nsSection.month?nsSection.month:'01' }}月）</div>
                <div class="ns-cum-thr-container">
                    <div class="cum-thr">
                        <img src="../../assets/img/common/cargo.png" height="100" width="100"/>
                        <number-grow class="base-pointer" :fixed="2" :cusStyle="cusStyle" :subCusStyle="subCusStyle"
                                     :time="1" :value="formatNumber(nsSection.cumGoodsThr)"
                                     @click="cumNsGoodsThrClick" :unit="'万吨'"></number-grow>
                    </div>
                    <div class="indicator-div">
                        <div class="base-pointer" @click="cumNsGoodsThrClick">
                            同比增长<span style="color: #ff6666">{{ formatNumber(nsSection.cumGoodsGrowth, 1) }}%</span>
                        </div>
                        <div class="base-pointer" @click="cumNsGoodsThrClick">
                            对深圳港占比<span style="color: #ff6666">{{ formatNumber(nsSection.cumGoodsRatio, 1) }}%</span>
                        </div>
                    </div>
                </div>
                <div class="port-ranking-title base-title base" style="font-size: 18px;">深圳港年累计吞吐量（至{{ nsSection.month?nsSection.month:'01' }}月）</div>
                <sz-goods-pie-chart class="port-ratio"/>
                <div class="port-ranking-title base-title base" style="font-size: 18px;">南山港贸易港口排名</div>
                <el-tabs @tab-click="handleRankingClick">
                    <el-tab-pane label="出口">
                        <fre-goods-port-ranking class="world-conta" type="out" ref="freGoodsOut"/>
                    </el-tab-pane>
                    <el-tab-pane label="进口">
                        <fre-goods-port-ranking class="world-conta" type="in" ref="freGoodsIn"/>
                    </el-tab-pane>
                </el-tabs>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import NumberGrow from "@/components/common/NumberGrow";
import WorldRankingConta from "../../components/portEconomy/HistogramSimple";
import FreGoodsPortRanking from "../../components/portEconomy/GoodsHistogramSimple";
import PieChartSimple from "@/components/portEconomy/PieChartSimple";
import http from "@/commons/utils/httpUtil";
import SzGoodsPieChart from "@/components/portEconomy/SzGoodsPieChart";

export default {
    name: "LeftHome",
    components: {SzGoodsPieChart, PieChartSimple, WorldRankingConta, FreGoodsPortRanking, NumberGrow},
    data() {
        return {
            bgImg: 'url(' + require('../../assets/img/common/ce_left.png') + ')',
            itemBgImg: 'url(' + require('../../assets/img/common/t_btn2.png') + ')',
            cusStyle: {
                fontSize: '38px',
                color: 'rgb(226, 103, 103)',
                letterSpacing: '2.67px',
                display: 'block',
                lineHeight: '48px',
            },
            subCusStyle: {
                color: '#38E5DE',
                fontSize: '16px',
                letterSpacing: '1px',
                display: 'block',
                lineHeight: '22px',
            },

            month: '01',
            nsSection: {},
            szSection: {}
        }
    },
    mounted() {
        this.initData();
        this.initFreGoodsOutPortRankingOption();
        this.initFreGoodsInPortRankingOption();
    },
    methods: {

        formatNumber(val, ratio) {
            return val ? ((val/(ratio?ratio:10000)).toFixed(2)) : 0;
        },

        initData() {
            let _this = this;
            http.get('/large/queryContaAndGoodsDataForLeftHomePage').then((res) => {
                if (res && res.data) {
                    _this.nsSection = res.data.data.nsSection;
                    _this.szSection = res.data.data.szSection;

                    // 世界集装箱排名
                    let worldPortList = res.data.data.contaWorldPortVOList.filter((item, index) => index < 6);
                    let worldRankingContaOption = {
                        // titleText: '班轮航线',
                        legendData: ['2020年吞吐量'],
                        xAxisData: worldPortList.map(item => item.portNameCn),
                        yAxisName: '吞吐量(万TEU)',
                        seriesData: [
                            worldPortList.map(item => item.newConta),
                        ]
                    }
                    _this.$refs.worldConta.initSeries(worldRankingContaOption);

                    // 国内集装箱排名
                    let cityPortList = res.data.data.cityPortContaRankingList.filter((item, index) => index < 6);
                    let cityContaOption = {
                        // titleText: '班轮航线',
                        legendData: ['2020年吞吐量'],
                        xAxisData: cityPortList.map(item => item.portNameCn),
                        yAxisName: '吞吐量(万TEU)',
                        seriesData: [
                            cityPortList.map(item => item.newCumContaThr),
                        ]
                    }
                    _this.$refs.cityConta.initSeries(cityContaOption);

                    // 粤港澳大湾区集装箱排名
                    let areaPortList = res.data.data.areaPortContaRankingList;
                    let areaContaOption = {
                        // titleText: '班轮航线',
                        legendData: ['当年累计吞吐量'],
                        xAxisData: areaPortList.map(item => item.portNameCn),
                        yAxisName: '吞吐量(万TEU)',
                        seriesData: [
                            areaPortList.map(item => item.cumContaThr),
                        ]
                    }
                    _this.$refs.areaConta.initSeries(areaContaOption);
                }
            });
        },

        /**
         * 初始化世界港口集装箱吞吐量排名
         */
        initWorldRankingContaOption() {
            let _this = this;
            http.get('/large/queryWorldPortContaRanking').then((res) => {
                if (res && res.data && res.data.length > 0) {
                    let dataList = res.data.filter((item, index) => index < 6);

                    let worldRankingContaOption = {
                        // titleText: '班轮航线',
                        legendData: ['2020年吞吐量'],
                        xAxisData: dataList.map(item => item.portNameCn),
                        yAxisName: '吞吐量(万TEU)',
                        seriesData: [
                            dataList.map(item => item.newConta),
                        ]
                    }

                    _this.$refs.worldConta.initSeries(worldRankingContaOption);
                }
            });
        },

        /**
         * 初始化国内港口集装箱吞吐量排名
         */
        initCityContaOption() {
            let _this = this;
            http.get('/large/queryCityPortContaRanking').then((res) => {
                if (res && res.data && res.data.length > 0) {
                    let dataList = res.data.filter((item, index) => index < 6);

                    let cityContaOption = {
                        // titleText: '班轮航线',
                        legendData: ['2020年吞吐量'],
                        xAxisData: dataList.map(item => item.portNameCn),
                        yAxisName: '吞吐量(万TEU)',
                        seriesData: [
                            dataList.map(item => item.newCumContaThr),
                        ]
                    }
                    _this.$refs.cityConta.initSeries(cityContaOption);
                }
            });
        },

        /**
         * 初始化世界港口集装箱吞吐量排名
         */
        initPortContaRatioOption() {
            let _this = this;
            http.get('/large/queryWorldPortContaRanking').then((res) => {
                if (res && res.data && res.data.length > 0) {
                    let dataList = res.data.filter((item, index) => index < 6);

                    let portContaRatioOption = {
                        titleText: '深圳各港集装箱吞吐量占比',
                        legendData: ['2020年吞吐量'],
                        // xAxisData: dataList.map(item => item.portNameCn),
                        // yAxisName: '吞吐量(万TEU)',
                        // yAxisData: dataList.map(item => item.portNameCn),
                        seriesData: [
                            {value: 47.71, name: '盐田'},
                            {value: 22.42, name: '赤湾'},
                            {value: 21.20, name: '蛇口'},
                            {value: 5.85, name: '大铲湾'},
                            {value: 2.82, name: '招商'}
                        ]
                    }

                    _this.$refs.portContaRatio.initSeries(portContaRatioOption);
                }
            });
        },

        /**
         * 初始化世界港口集装箱吞吐量排名
         */
        initFreGoodsOutPortRankingOption() {
            let _this = this;
            http.get('/large/queryFreGoodsOutPortRanking/2020/20').then((res) => {
                if (res && res.data && res.data.records.length > 0) {
                    let dataList = res.data.records.filter((item, index) => index < 6);

                    let freGoodsOutPortRankingOption = {
                        // titleText: '班轮航线',
                        legendData: ['2020年吞吐量'],
                        xAxisData: dataList.map(item => item.portNameCn),
                        yAxisName: '吞吐量(万吨)',
                        seriesData: [
                            dataList.map(item => item.goodsThr),
                        ]
                    }

                    _this.$refs.freGoodsOut.initSeries(freGoodsOutPortRankingOption);
                }
            });
        },

        /**
         * 初始化世界港口集装箱吞吐量排名
         */
        initFreGoodsInPortRankingOption() {
            let _this = this;
            http.get('/large/queryFreGoodsInPortRanking/2020/20').then((res) => {
                if (res && res.data && res.data.records.length > 0) {
                    let dataList = res.data.records.filter((item, index) => index < 6);

                    let freGoodsOutPortRankingOption = {
                        // titleText: '班轮航线',
                        legendData: ['2020年吞吐量'],
                        xAxisData: dataList.map(item => item.portNameCn),
                        yAxisName: '吞吐量(万吨)',
                        seriesData: [
                            dataList.map(item => item.goodsThr),
                        ]
                    }

                    _this.$refs.freGoodsIn.initSeries(freGoodsOutPortRankingOption);
                }
            });
        },

        cumNsContaThrClick() {
            window.AC.ShowWindow(6, 'http://localhost:8080/#/conta-middle-home/ns', {
                draggable: false,
                resize: false,
                callbackFn: function (data) {
                    console.log('ShowWindow:' + JSON.stringify(data));
                },
            });
        },

        cumNsGoodsThrClick() {
            window.AC.ShowWindow(6, 'http://localhost:8080/#/goods-middle-home/ns', {
                draggable: false,
                resize: false,
                callbackFn: function (data) {
                    console.log('ShowWindow:' + JSON.stringify(data));
                },
            });
        },
        cumSzContaThrClick(type) {
            window.AC.ShowWindow(6, 'http://localhost:8080/#/conta-middle-home/sz' + (type ? '-' + type : ''), {
                draggable: false,
                resize: false,
                callbackFn: function (data) {
                    console.log('ShowWindow:' + JSON.stringify(data));
                },
            });
        },
        cumRankingContaThrClick() {
            window.AC.ShowWindow(6, 'http://localhost:8080/#/conta-middle-home/ranking', {
                draggable: false,
                resize: false,
                callbackFn: function (data) {
                    console.log('ShowWindow:' + JSON.stringify(data));
                },
            });
        },
        closeLeftWindow() {
            window.AC.HideWindow(1, {
                callbackFn: function (data) {
                }
            });
        },
        handleClick(tab, event) {
            console.log(tab, event)
        },
        handleRankingClick(tab, event) {
            console.log(tab, event)
        },
    }
}
</script>
<style scoped>
#left-home {
    height: calc(934px - 16px);
    width: calc(360px - 34px);
    padding: 16px 18px 0 16px;
}

.base {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}

.thr-div > div:nth-child(1), .cum-thr-title {
    margin-bottom: 10px;
}

.base-title {
    background: linear-gradient(to right, #38E5DE, #0DA98000);
    color: white;
    padding-left: 4px;
    margin-bottom: 10px;
}

.base-pointer {
    cursor: pointer;
}

.ns-cum-thr-container {
    background-color: #ffffff0f;
    margin-bottom: 10px;
}

.cum-thr {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.sz-pointer {
    color: #38E5DE;
}

.indicator-div {
    display: flex;
    justify-content: space-around;
    font-size: 18px;
    padding: 14.5px;
    color: #FFFFFFD9
}

.indicator-div > div > span {
    font-size: 26px;
}

.indicator-div > div {
    display: grid;
}

.world-conta {
    height: 220px;
    width: 326px;
}

.port-ratio {
    height: 260px;
    width: 326px;
}

.sz-cum-thr-container {
    background-color: #ffffff0f;
    margin-bottom: 10px;
    height: 260px;
    width: 326px;
}

.close-btn {
    /*filter: invert(79%) sepia(78%) saturate(405%) hue-rotate(111deg) brightness(92%) contrast(94%);*/
}
</style>
<style>
.el-tabs__nav {
    width: 100%
}

.el-tabs__item {
    color: #ffffffD9;
    width: 33.333333%;
}

.el-space__item {
    width: 100%;
}

.el-divider--horizontal {
    margin: 10px 0;
}

.thr-div {
    margin-bottom: 10px;
    padding: 5px;
}

.thr-div {
    border-left: solid 2px #38E5DE;
    background-color: #ccc9c914;
}

.el-tabs__item.is-active, .el-tabs__item:hover {
    color: #38E5DE;
}

.el-tabs__active-bar {
    background-color: #38E5DE;
}

</style>